<template>
  <div class="detail-container">
    <Header />
    <div class="content-wrapper">
      <div class="page-header">
        <button @click="goBack" class="btn-back">返回</button>
        <h2>成员详情</h2>
      </div>
      
      <div class="member-detail-card">
        <div class="member-basic-info">
          <div class="avatar-placeholder">
            <i class="iconfont icon-user"></i>
          </div>
          <div class="basic-info">
            <h3>{{ member.name }}</h3>
            <p><span class="label">学号：</span>{{ member.studentId }}</p>
            <p><span class="label">学院：</span>{{ member.college }}</p>
            <p><span class="label">部门：</span>{{ member.department }}</p>
            <p><span class="label">职位：</span>{{ member.position }}</p>
          </div>
        </div>
        
        <div class="member-other-info">
          <div class="info-section">
            <h4>联系方式</h4>
            <p>{{ member.phone }}</p>
          </div>
          
          <div class="info-section">
            <h4>入社时间</h4>
            <p>{{ member.joinDate }}</p>
          </div>
          
          <div class="info-section">
            <h4>备注信息</h4>
            <p>{{ member.remark || '无' }}</p>
          </div>
        </div>
      </div>
      
      <div class="member-schedules">
        <h3>该成员排班记录</h3>
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>日期</th>
              <th>稿件主题</th>
              <th>交稿时间</th>
              <th>交音频时间</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(schedule, index) in memberSchedules" :key="schedule.id">
              <td>{{ index + 1 }}</td>
              <td>{{ schedule.date }}</td>
              <td>{{ schedule.theme }}</td>
              <td>{{ schedule.manuscriptDeadline }}</td>
              <td>{{ schedule.audioDeadline }}</td>
              <td :class="schedule.status">{{ schedule.status }}</td>
            </tr>
            <tr v-if="memberSchedules.length === 0">
              <td colspan="6" class="no-data">暂无排班记录</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const memberId = parseInt(route.params.id)

// 成员数据
const members = ref([
  { id: 1, name: '张明', studentId: '2021001', college: '计算机学院', department: '电台部', position: '部长', phone: '13800138001', joinDate: '2022-09-01', remark: '负责部门管理' },
  { id: 2, name: '李华', studentId: '2021002', college: '软件学院', department: '电台部', position: '部员', phone: '13800138002', joinDate: '2022-09-01', remark: '擅长音频剪辑' },
  { id: 3, name: '王芳', studentId: '2021003', college: '数字媒体学院', department: '电台部', position: '部员', phone: '13800138003', joinDate: '2023-03-15', remark: '新人' }
])

// 排班数据
const schedules = ref([
  { id: 1, date: '周一', theme: '校园新闻', personInCharge: '张明', manuscriptDeadline: '2024-06-10 12:00', audioDeadline: '2024-06-10 18:00', status: '已完成' },
  { id: 2, date: '周三', theme: '音乐推荐', personInCharge: '李华', manuscriptDeadline: '2024-06-12 12:00', audioDeadline: '2024-06-12 18:00', status: '已安排' },
  { id: 3, date: '周五', theme: '人物访谈', personInCharge: '王芳', manuscriptDeadline: '2024-06-14 12:00', audioDeadline: '2024-06-14 18:00', status: '待确认' }
])

// 当前成员信息
const member = ref({})
const memberSchedules = ref([])

// 初始化数据
onMounted(() => {
  // 获取成员详情
  const foundMember = members.value.find(m => m.id === memberId)
  if (foundMember) {
    member.value = foundMember
  } else {
    alert('未找到该成员信息')
    router.push('/buzhang/diantai')
  }
  
  // 获取该成员的排班记录
  memberSchedules.value = schedules.value.filter(schedule => 
    schedule.personInCharge === member.value.name
  )
})

// 返回列表页
const goBack = () => {
  router.push('/buzhang/diantai')
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.btn-back {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 15px;
}

.member-detail-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.member-basic-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f0f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #3498db;
}

.basic-info h3 {
  margin-bottom: 15px;
  color: #333;
}

.basic-info p {
  margin-bottom: 8px;
  color: #666;
}

.label {
  font-weight: bold;
  color: #333;
}

.member-other-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.info-section h4 {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.member-schedules {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.data-table th,
.data-table td {
  border: 1px solid #e8e8e8;
  padding: 12px 15px;
  text-align: left;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>